<!-- 首页根组件 -->
<template>
  <div class="home">
    <HomeHeader />
    <div class="ly-tab-wrap">
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="changeTab"
      >
      </ly-tab>
      <div class="ly-cate" @click="toCategory">
        <i class="iconfont icon-tubiao13"></i>
        <span>分类</span>
      </div>
    </div>
    <!-- 这里应该展示点击ly-tab中的首页，家用电器，等等展示的组件 
    分别展示HomeIndex.vue和HomeCate.vue
     -->
    <component :is="homeCom"></component>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeHeader from "./components/HomeHeader";
import HomeIndex from "./childrenview/HomeIndex";
import HomeCate from "./childrenview/HomeCate";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeIndex,
    HomeCate,
    HomeHeader,
  },
  data() {
    //这里存放数据
    return {
      selectedId: 0,
      items: [
        { label: "首页" },
        { label: "家用电器" },
        { label: "男装女装" },
        { label: "鞋靴箱包" },
        { label: "手机数码" },
        { label: "电脑办公" },
        { label: "家居家纺" },
        { label: "个人化妆" },
      ],
      options: {
        activeColor: "#fff",
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
      homeCom: "HomeIndex",
    };
  },
  methods: {
    toCategory() {
      this.$router.push("/category"); //编程式导航
    },
    changeTab(item, index) {
      console.log(item);
      console.log(index);
      if (index == 0) {
        this.homeCom = "HomeIndex";
      } else {
        this.homeCom = "HomeCate";
      }
    },
  },
};
</script>
<style lang="less">
.ly-tab-wrap {
  width: 100%;
  height: 4.4rem;
  display: flex;
  position: fixed;
  top: 4.4rem;
  z-index: 999;
  left: 0;
  .ly-tab {
    width: 80%;
    .ly-tabbar {
      background-color: red;
      box-shadow: 0 0px 0px 0px #eee;
      border-bottom: none;
      .ly-tab-list {
        height: 4.4rem;
        padding: 0;
        .ly-tab-item {
          color: #fff;
        }
      }
    }
  }
  .ly-cate {
    width: 20%;
    line-height: 4.4rem;
    text-align: center;
    background: red;
    color: #fff;
    i {
      font-size: 2rem;
    }
    span {
      font-size: 1.6rem;
    }
  }
}
</style>